package myJs.admin.memberManage

import myJs.Implicits._
import myJs.api.Api
import myJs.myPkg.jquery.$
import myJs.myPkg._
import myJs.tool.Tool
import org.scalajs.dom.{FormData, html}
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks.useEffect
import slinky.core.facade.React
import slinky.web.html._

import scala.concurrent.Future
import scala.scalajs.js
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._
import com.softwaremill.quicklens._
import myJs.common.InputInlineCp
import myJs.cps.Style
import myJs.myPkg.reactBootstrap.Modal
import myJs.myPkg.reactHookForm._
import shared.pojo.Pojo.{MemberAddData, MemberData}

import scala.scalajs.js.JSON
import io.scalaland.chimney.dsl._

/**
 * Created by yz on 21/1/2022
 */
@react object ModifyCp {

  case class Props(refreshTableB: () => Future[Unit], show: Boolean = false, showChange: Boolean => Unit,
                   member: MemberData, memberChange: MemberData => Unit)

  val component = FunctionalComponent[Props] { props =>

    val useForm = ReactHookForm.useForm(UseFormOptions(mode = "onChange"))

    object FTool {

      def handleClose = () => {
        props.showChange(false)
      }

      def accountChange = (v: String) => {
        val newMember = props.member.modify(_.account).setTo(v)
        props.memberChange(newMember)
      }

      def passwordChange = (v: String) => {
        val newMember = props.member.modify(_.password).setTo(v)
        props.memberChange(newMember)
      }

      def update = () => {
        val index = layer.alert(Tool.myElement, Tool.layerOptions)
        val request = props.member.transformInto[MemberAddData]
        Api.member.update(request).map { xhr =>
          props.refreshTableB().map { x =>
            layer.close(index)
            props.showChange(false)
            swal(SwalOptions(title = "成功", text = "修改成功!", `type` = "success"))
          }
        }
        ()
      }

      def formSubmit = useForm.handleSubmit((data: js.Dictionary[js.Any]) => {
        println(JSON.stringify(data))
        FTool.update()
      })

    }

    Modal(onHide = FTool.handleClose, show = props.show, size = "addModal")(
      Modal.Header(bsPrefix = "modal-header bg-primary", closeButton = true)(
        Modal.Title(
          i(className := "fa fa-repeat"),
          span(style := Style(fontWeight = "bold"), id := "lblAddTitle", " 重置")
        )
      ),
      form(id := "form", data - "toggle" := "validator", className := "form-horizontal", onSubmit := FTool.formSubmit,
        Modal.Body(
          div(className := "row-fluid",
            InputInlineCp(useForm = useForm, label = "账号", name = "account", labelWidth = 2, inputWidth = 6,
              value = props.member.account, onChange = FTool.accountChange, readOnly = true
            ),
            InputInlineCp(useForm = useForm, label = "密码", name = "password", labelWidth = 2, inputWidth = 6,
              value = props.member.password,
              onChange = FTool.passwordChange, registerOptions = RegisterOptions(
                required = ValidationValueMessage(value = true, message = s"密码不能为空！"),
              )),
          )
        ),
        Modal.Footer(bsPrefix = "modal-footer bg-info")(
          button(`type` := "submit", className := "btn blue", "确定"),
          button(`type` := "button", className := "btn green", data - "dismiss" := "modal", "取消",
            onClick := FTool.handleClose),
        )
      )

    )

  }


}
